<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <h1>The Ajax 02 Page</h1>
        <button onclick="doAjaxGet()">Do Ajax Get</button>
        <button onclick="doAjaxPost()">Do Ajax Post</button>
        <button onclick="doAjaxPostJson()">Do Ajax PostJson</button>
        <button onclick="doAjaxDelete()">Do Ajax Delete</button>
        <button onclick="doAjaxPut()">Do Ajax Put</button>
    </div>
    <div id="result">

    </div>
    <!--<form enctype="application/x-www-form-urlencoded"></form>-->
    <script>
        function  doAjaxPut(){
            // debugger
            //console.log("===123===")
            let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        let div= document.getElementById("result");
                        div.innerHTML=xhr.responseText;
                    }
                }
            }
            let params="id=101&city=tianjin";
            xhr.open("put","http://localhost:8080/doAjaxPut",true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(params);//将json对象转换为json字符串
        }


        function  doAjaxDelete(){
             debugger
            //console.log("===123===")
            let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        let div= document.getElementById("result");
                        div.innerHTML=xhr.responseText;
                    }
                }
            }
            let params="100";
            xhr.open("delete",`http://localhost:8080/doAjaxDelete/${params}`,true);
            xhr.send(null);
        }

        //接收Post请求方式json格式数据
        function  doAjaxPostJson(){
            // debugger
            //console.log("===123===")
            let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        let div= document.getElementById("result");
                        div.innerHTML=xhr.responseText;
                    }
                }
            }
            let params={id:103,city:"xiongan"};
            xhr.open("post","http://localhost:8080/doAjaxPostJson",true);
            let paramsStr=JSON.stringify(params);//将json对象转换为json字符串
            console.log(paramsStr);
            //post请求必须设置请求头
           // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //用@RequestBody时这样写
            xhr.setRequestHeader("Content-Type","application/json");
            xhr.send(paramsStr);
        }

        //接收Post请求方式普通表单数据
        function  doAjaxPost(){
            // debugger
            //console.log("===123===")
            let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        let div= document.getElementById("result");
                        div.innerHTML=xhr.responseText;
                    }
                }
            }
            let params="id=102&city=shenzhen"
            xhr.open("post","http://localhost:8080/doAjaxPost",true);
            //post请求向服务端传递数据,需要设置请求头,必须在open之后
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(params);//post请求可以将参数放到send方法内部
        }

        function  doAjaxGet(){
           // debugger
            //console.log("===123===")
            let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        let div= document.getElementById("result");
                        div.innerHTML=xhr.responseText;
                    }
                }
            }
            let params="";
            //let params="b";
            //xhr.open("Get","http://localhost:8080/doAjaxGet",true);
           // xhr.open("Get",`http://localhost:8080/doAjaxGet/b`,true);
            xhr.open("GET",`http://localhost:8080/doAjaxGet/${params}`,true);
            xhr.send(null);
        }

    </script>
</body>
</html>